Checkbox Guidelines 核取方塊指導規則

Usage  用法

使用核取方塊可以讓使用者從列表中選擇多個選項。它的優點是：佈局整齊，能清楚地顯示相關選項，而且比開關按鈕節省空間。

核取方塊用於選擇多個相關選項
✓ 核取方塊允許使用者從列表中選擇一個或多個選項，父級核取方塊可以方便的選擇或取消選擇所有專案，

× 如果列表包含多個選項，請勿使用開關。核取方塊意味著這些專案是相關的。並佔有較少的視覺空間。

Alternate selection controls 交替選擇控制元件

選擇控制元件有三種：核取方塊、單選按鈕和開關。核取方塊適合在列表中選多個選項，單選按鈕用來在列表中只選一個選項，而開關最適合用在設定裡開啟或關閉某個功能。

Radio Buttons 單選按鈕
Switches 開關

Anatomy 結構

1 Container 2 Icon

Responsive layout  響應式佈局

當視窗變寬時，把核取方塊放在側邊欄等固定區域中，這樣可以更好地整理相關功能和操作選項。

側邊欄可在較大螢幕上對相關空間進行分組

Behavior  行為

列表中的多個核取方塊可以被選中。

核取方塊可以與其他核取方塊存在父子關係。

核取方塊被點選時會立即顯示是否被選中。用它來控制功能時，功能也會立即開啟或關閉。

Interaction & style  互動與樣式

使用者應該能夠透過選擇文字標籤或核取方塊來選擇一個選項。

父核取方塊的三種狀態很簡單：

  1. 全部勾選
  1. 全部不勾選
  1. 部分勾選（不確定狀態）

每個核取方塊都可以單獨勾選或取消。當一組核取方塊中只有部分子項被勾選時，父核取方塊會顯示"不確定"狀態。如果你點選這個不確定狀態的父核取方塊，它會自動勾選所有子項。